<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>课堂练习题</title>
	<script src="../js/vue.js"></script>
</head>
<body>
	<fieldset id="E01">
		<legend v-once>{{n0}}</legend>
		<ul>
			<li>{{n1}}</li>
			<li>{{n2}}</li>
			<li>{{n3}}</li>
		</ul>
	</fieldset>
	<script type="text/javascript">
		var v1 = new Vue({
			el : "#E01",
			data : {
				n0 : "水泊梁山",
				n1 : "林冲",
				n2 : "孙二娘",
				n3 : "宋江"
			}
		})
	/**
	1.在legend中写入 "水泊梁山", 并且让其内容不可改变
	2.在三个 li 中 写入三个水浒英雄的名字
	*/
	</script>

	<fieldset id="E02">
		<legend v-cloak>{{n0}}</legend>
		<ul>
			<li v-if="flag1">{{n1}}</li><input type="button" value="显示" @click="put1">
			<li v-if="flag2">{{n2}}</li><input type="button" value="显示" @click="put2">
			<li v-if="flag3">{{n3}}</li><input type="button" value="显示" @click="put3">
		</ul>
	</fieldset>
	<script type="text/javascript">
		var v2 = new Vue({
			el : "#E02",
			data : {
				n0 : "水泊梁山",
				n1 : "林冲",
				n2 : "孙二娘",
				n3 : "宋江",
				flag1 : false,
				flag2 : false,
				flag3 : false
			},
			methods : {
				put1 : function (){
					this.flag1 = !this.flag1;
				},
				put2 : function (){
					this.flag2 = !this.flag2;
				},
				put3 : function (){
					this.flag3 = !this.flag3;
				}
			}
		})
	/**
	1.在legend中写入 "水泊梁山" 并加上"斗篷"
	2.给每个li中添加一个按钮, 每个按钮上显示一个水浒英雄的名字
	*/
	</script>
	<style>
		/*斗篷样式*/
		[v-cloak]{
			display: none;
		}
	</style>

	<fieldset id="E03">
		<legend>练习题3: 计算属性</legend>
		<dl>
			<dt>{{name}}</dt>
			<dd>力量:{{power}}</dd>
			<dd>智力:{{intel}}</dd>
			<dd>敏捷:{{agile}}</dd>
			<dd>综合战力:{{sum}}</dd>
		</dl>
	</fieldset>
	<script type="text/javascript">
	var heroe = {name:"花和尚鲁智深",power:98, intel:76, agile:73};
	var v3 = new Vue({
		el : "#E03",
		data : {
			name : heroe.name,
			power : heroe.power,
			intel: heroe.intel,
			agile: heroe.agile
		},
		computed: {
			sum(){
				return this.power+this.intel+this.agile;
			}
		}
	})
	/**
	1. 将 heroe 对象的值设置到 dl 中
	3. 第 4 个 dd 使用计算属性算出其综合战力值 = 力量 + 智力 + 敏捷
	*/
	</script>


	<fieldset id="E04">
		<legend >练习题4: 样式设置</legend>
		<div :style="mydivstyle()">
			<img :style="myimgstyle()" src="../img/2.jfif"><br> <span >{{n1}}</span>
		</div>
		<div :style="mydivstyle()">
			<img :style="myimgstyle()" src="../img/3.jfif"><br> <span >{{n2}}</span>
		</div>
		<div :style="mydivstyle()">
			<img :style="myimgstyle()" src="../img/1.jfif"><br> <span >{{n3}}</span>
		</div>
	</fieldset>
	<script type="text/javascript">
		var v4 = new Vue({
			el : "#E04",
			data : {
				n1 : "林冲",
				n2 : "孙二娘",
				n3 : "宋江"
			},
			methods: {
				mydivstyle(){
					return {width : "120px", align :"center", border : '1px solid red', padding: "5px", margin: "5px"};
				},
				myimgstyle(){
					return {height : "100px"};
				}
			}
		})
	/**
	1. img 中添加水浒英雄的图片, 并且使用属性设定高度为100px
	2. 给 div 设置: 宽度120px + 文字居中 + 边框 + 行内块 + 内边距5px
	3. 给 span 添加英雄名字
	*/
	</script>


	<style>
	.border {
		border: 2px solid blue;
	}
	
	.text {
		color: red;
		text-align: center;
	}
	
	.size {
		width: 150px;
		height: 150px;
		display: inline-block;
		margin: 5px;
		padding: 5px;
	}
	</style>
	<fieldset id="E05">
		<legend>练习题5: class属性</legend>
		<div id="div1" :class="['size']">
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
			 <br> 关注样式
		</div>
		<div id="div2" :class="{size: Flag, border: Flag}" >
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500">
			 <br> 关注样式
		</div>
		<div id="div3" :class="div3">
			<img width="100px" src="https://img1.baidu.com/it/u=3297127229,1378963575&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500"> 
			<br> 关注样式
		</div>
	</fieldset>
	<script type="text/javascript">
		var v5 = new Vue({
			el : "#E05",
			data : {
				Flag: true
			},
			computed : {
				div3(){
					return ["size","border","text"];
				}
			}
		})
	/**
	1. 将 .size 样式应用到 div1 上 ( 数组方式)
	2. 将 .border .size 样式应用到 div2 上 ( 对象方式)
	2. 将 .border .text .size 样式应用到 div3 上 ( 计算属性方式)
	*/
	</script>


</body>
</html>